<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.all.js"></script>
    <!--<script src="layui/plugin/myCommon.js"></script>-->
    <!--<script src="global.js"></script>-->

</head>
<body>

<form id="setForm"  lay-filter="setForm" class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input type="text" id="title" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">验证日期</label>
        <div class="layui-input-inline">
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开关-默认开</label>
        <div class="layui-input-block">
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>
<script>

    layui.use(['laydate', 'layedit','form'], function(){
        var form = layui.form; //获取form模块
        var laydate = layui.laydate; //获取form模块

        laydate.render({
            elem: '#date'
        });

        //自定义验证规则
//        form.verify({
//            title: function(value){
//                if(value.length < 5){
//                    return '标题至少得5个字符啊';
//                }
//            }
//        });

        //监听提交按钮
        form.on('submit(setForm)', function(data){
            console.log(data);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //表单初始赋值
        form.val('setForm', {
            "title": "贤心" // "name": "value"
//            ,"password": "123456"
//            ,"interest": 1
//            ,"like[write]": true //复选框选中状态
//            ,"close": true //开关状态
//            ,"sex": "女"
//            ,"desc": "我爱 layui"
        })

    });

</script>
